<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false"%>
<%@ include file="/WEB-INF/view/common/loginCheck.jspf" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="${ROOT}/static/js/easyui/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="${ROOT}/static/js/easyui/themes/icon.css" />
</head>	

<body>	
<div class="easyui-layout" data-options="fit:true">
    <div id="shopStatDiv" data-options="region:'west',split:true" style="width:35%;padding:5px">
    	<table id="shopStatTable" style="width:100%"></table>
    </div>
    <div id="shopStatByShopDiv" data-options="region:'center'" style="width:25%;padding:5px">
    	<table id="shopStatByShopTable" style="width:100%"></table>
    </div>
    <div id="shopStatByShopDayDiv" data-options="region:'east',split:true" style="width:40%;padding:5px">
    	<table id="shopStatByShopDayTable" style="width:100%"></table>
    </div>
</div>
<script type="text/javascript" src="${ROOT}/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${ROOT}/static/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ROOT}/static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ROOT}/static/js/common/common.js"></script>
<script type="text/javascript">
	var shopId = null;
	var day =  null;
	$(function () {
		$('#shopStatTable').datagrid({
		    url:'${ROOT}/report/shop/shopStat?_rt=' + new Date().getTime(),
		    columns:[[
		        {field: 'areaName', title: '区域', width: '80', align: 'left'},
		        {field: 'shopName', title: '名称', width: '180', align: 'left'},
		        {field: 'contact', title: '联系方式', width: '100', align: 'left'},
		        {field: 'shopType', title: '门店类型', width: '80', align: 'left'},
		        {field: 'amount', title: '累计销售', width: '100', align: 'right'}
		    ]],
		    idField: 'id',
	    	rownumbers: true,
	    	singleSelect: true,
	    	scrollbarSize: 12,
	    	showFooter: true,
	    	onClickRow: function (index, row) {
	    		shopId = row.id
	    		$('#shopStatByShopTable').datagrid('load', {
	    		    shopId: row.id
	    		});
	    		$('#shopStatByShopDiv').show();
	    		$('#shopStatByShopDayDiv').hide();
	    	}
		});
		
		$('#shopStatByShopTable').datagrid({
		    url:'${ROOT}/report/shop/shopStatByShop?_rt=' + new Date().getTime(),
		    columns:[[
				{field: 'day', title: '时间', width: '150', align: 'left'},
		        {field: 'amount', title: '金额', width: '200', align: 'right'}
		    ]],
		    idField: 'day',
	    	rownumbers: true,
	    	singleSelect: true,
	    	scrollbarSize: 12,
	    	showFooter: true,
	    	onClickRow: function (index, row) {
	    		day = row.day;
	    		$('#shopStatByShopDayTable').datagrid('load', {
	    		    day: day,
	    		    shopId: shopId
	    		});
	    		$('#shopStatByShopDayDiv').show();
	    	}
		});
		
		$('#shopStatByShopDayTable').datagrid({
		    url:'${ROOT}/report/shop/shopStatByShopDayDetail?_rt=' + new Date().getTime(),
		    columns:[[
		        {field: 'prodName', title: '名称', width: '250', align: 'left'},
		        {field: 'prodSku', title: '规格', width: '80', align: 'left'},
		        {field: 'sales', title: '数量', width: '60', align: 'right'},
		        {field: 'unit', title: '单位', width: '80', align: 'left'},
		        {field: 'price', title: '单价(元)', width: '60', align: 'right'},
		        {field: 'amount', title: '金额', width: '60', align: 'right'}
		    ]],
	    	rownumbers: true,
	    	singleSelect: true,
	    	checkOnSelect: true,
	    	scrollbarSize: 12,
	    	showFooter: true,
	    	onClickRow: function (index, row) {
	    		
	    	}
		});
		
		$('#shopStatByShopDiv').hide();
		$('#shopStatByShopDayDiv').hide();
	});
</script>
</body>
</html>